<template>
	<view class='ws-page'>
		<view class="ws-book-introduce" :style='"backgroundImage:url("+imgUrl+bookInfo.Img+")"'>
			<view class="ws-book-bg">
				
			</view>
			<view class="ws-book-imgb">
				<image class='ws-book-img' :src="imgUrl+bookInfo.Img" mode="aspectFit"></image>
			</view>
			<view class='ws-book-info'>
				<view>
					<text class='ws-book-name'>{{bookInfo.Name}}</text>
					 <view class="ws-book-user-type">
						<view >作者：{{bookInfo.Author||''}}</view>
						<view >类型：{{bookInfo.CName||''}}</view>
						<view >状态：{{bookInfo.BookStatus||''}}</view>
						<view v-if='bookInfo.BookVote'>评分：{{bookInfo.BookVote.Score||''}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ws-book">
			<view class="ws-book-doc">
				{{bookInfo.Desc}}
			</view>
			<view class="ws-book-catalog" @click='watchCataLogEvent'>
				<view class='catalog-title'>目录</view>
				<view class="book-new-catalog">
					<view class='new-cataloag'>
						<view class="new-cataloag-name">
							{{bookInfo.LastChapter||''}}
						</view>
						<view class="new-cataloag-time">
							{{bookInfo.LastTime||''}}
						</view>
					</view>
					<image class='ws-cataloag-img' src="/static/images/left.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="ws-book-operation">
				<button type="default" @click='startWatchBookEvent'>{{watchBookText||''}}</button>
				<button type="default" @click ='collectEvent'>{{collectText||''}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		    this.bookId = option.bookid
			this.getbookInfo()
			this.isCoolectEvent()
		},
		onShow(){
			this.collectCatalogInfo = uni.getStorageSync(this.bookId)
			if(this.collectCatalogInfo){
				this.watchBookText='继续阅读'
			}else{
				this.watchBookText='免费阅读'
			}
		},
		data() {
			return {
				bookId:null,
				bookInfo:{},
				imgUrl:'https://imgapi.jiaston.com/BookFiles/BookImages/',
				collectText:'收藏',
				collectFlag:true,
				collectList:[],
				collectCatalogInfo:null,
				watchBookText:'免费阅读'
			};
		},
		methods:{
			async getbookInfo(){
				const data = await this.$https({
					url:`book/${this.bookId}`
				})
				if(data&&data.code===200){
					this.bookInfo=data.data
				}else{
					this.bookInfo = null
				}
			},
			isCoolectEvent(){
				this.collectList = uni.getStorageSync('collectList') || [];
				this.collectFlag = this.collectList.some(item =>{
					return	Number(item.Id) === Number(this.bookId)
					
				})
				if(this.collectFlag){
					this.collectText='已收藏'
				}else{
					this.collectText='收藏'
				}
			},
			collectEvent(){
				if(this.collectList.length>=10){
					uni.showModal({
					    title: '提示',
					    content: '书架中最多可收藏10本',
					    success: function (res) {
					        if (res.confirm) {
					        } else if (res.cancel) {
					        }
					    }
					});
					return false
				}
				this.isCoolectEvent()
				if(!this.collectFlag){
					let bookInfo = {
						Id: this.bookInfo.Id,
						Name: this.bookInfo.Name,
						Img: this.bookInfo.Img,
						Author:this.bookInfo.Author,
						LastTime:this.bookInfo.LastTime,
						LastChapter:this.bookInfo.LastChapter
					}
					this.collectList.push(bookInfo)
					try {
					    uni.setStorageSync('collectList',this. collectList);
						this.collectText='已收藏'
					} catch (e) {
					    // error
					}
				}
			},
			startWatchBookEvent(){
				let catalogid = this.bookInfo.FirstChapterId
				this.collectCatalogInfo = uni.getStorageSync(this.bookId)
				if(this.collectCatalogInfo){
					console.log(this.collectCatalogInfo)
					this.watchBookEvent(this.collectCatalogInfo.catalogId)
				}else{
					this.watchBookEvent(catalogid)
				}
			},
			watchBookEvent(catalogid){
				uni.navigateTo({
				    url: `/pages/books/bookcontent/bookcontent?bookid=${this.bookId}&catalogId=${catalogid}`,
				})
			},
			watchCataLogEvent(){
				uni.navigateTo({
				    url: `/pages/books/catalog/catalog?bookid=${this.bookId}`,
					animationType:'pop-in',
				    animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	.ws-page{
		.ws-book-introduce{
			display: flex;
			position: relative;
			background: no-repeat fixed;
			padding:1px;
			background-size:cover;
			padding:40rpx 30rpx;
			box-sizing:border-box;
			z-index:4;
			.ws-book-bg{
				position: absolute;
				top:0;
				left:0;
				right:0;
				bottom:0;
				background:rgba(0,0,0,0.7);
				z-index: -1;
			}
			.ws-book-imgb{
				width:240rpx;
				height:300rpx;
				box-shadow: 0 0 8px #fff;
				.ws-book-img{
					width:240rpx;
					height:300rpx;
				}
			}
			.ws-book-info{
				margin-left:30rpx;
				display: flex;
				align-items: center;
				.ws-book-name{
					font-size:36rpx;
					color:#fff;
					font-weight: 600;
				}
				.ws-book-user-type{
					color:#fff;
					font-size:32rpx;
					line-height: 60rpx;
					text{
						margin-right:30rpx;
					}
				}
				
			}
		}
		.ws-book{
			.ws-book-operation{
				display: flex;
				margin-top:40rpx;
				justify-content: space-between;
				button{
					width:320rpx;
					height:80rpx;
					line-height: 80rpx;
					background:#409EFF;
					color:#fff;
				}
			}
			.ws-book-doc{
				margin-top:20rpx;
				color:#666;
				font-size:32rpx;
				line-height: 56rpx;
				background:#fff;
				padding:20rpx 30rpx;
			}
			.ws-book-catalog{
				width:100%;
				display: flex;
				justify-content: space-between;
				background:#fff;
				padding:20rpx 30rpx;
				margin-top:20rpx;
				.catalog-title{
					line-height:90rpx;
					color:#666;
				}
				.book-new-catalog{
					display: flex;
					align-items: center;
					.new-cataloag{
						.new-cataloag-name{
							font-size:32rpx;
							color:#666;
							line-height: 56rpx;
						}
						.new-cataloag-time{
							font-size:24rpx;
							color:#999;
						}
					}
					.ws-cataloag-img{
						height:60rpx;
						width:40rpx;
						margin-left:20rpx;
					}
				}
			}
		}
	}
</style>
